<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>预约图书</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/date.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Student.html">返回上一页</a></li>
    <li><a href="">预约图书</a></li>
  </ul>
  <div class="search">
    <input type="text" id="bookWareId" placeholder="输入图书id">
    <button id="sure"><i>搜索</i></button>
  </div>
</body>

</html>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  #bookWareId {
    background-image: url('images/searchicon.png');
    /* 搜索按钮 */
    background-position: 5px 1px;
    /* 定位搜索按钮 */
    background-repeat: no-repeat;
    /* 不重复图片*/
    width: 100%;
    font-size: 16px;
    /* 加大字体 */
    padding: 12px 40px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
  }

  .search {
    width: 30%;
    margin: 100px auto;
    /*搜索栏的位置*/
    display: flex;
    /**/
  }

  .search input {
    float: left;
    flex: 4;
    height: 30px;
    outline: none;
    border: 1px solid white;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .search button {
    float: right;
    flex: 1;
    height: 30px;
    background-color: rgb(63, 224, 245);
    color: white;
    border-style: none;
    outline: none;
  }

  .search button i {
    font-style: normal;
  }

  .search button:hover {
    font-size: 20px;
    background-color: rgb(63, 224, 245);
  }
</style>
<script>
  $("#sure").click(function () {
    var bookwareAndUser = {
      userId:$.cookie('student'),
      bookWareId:$("#bookWareId").val()
    }
    console.log(bookwareAndUser.bookWareId,bookwareAndUser.userId)
        $.ajax({
          url: "http://localhost:8080/bookware/order",
          type: "post",
          dataType: 'json',
          data: JSON.stringify(bookwareAndUser),
          contentType: "application/json",
          success: function (res) {
            alert(res.msg)
          },
          error: function (res) {
            alert("JSON数据获取失败，请联系管理员！");
          }
        })
  })
</script>